<template>
    <div class="SCdealBwrap">
        <!-- 展示订单区域 -->
        <div class="dataListWrap" v-if="isDataList">
            <div class="dataList">
                <p class="dataListTitle">
                    <span>宝贝</span>
                    <span>单价</span>
                    <span>数量</span>
                    <span>买家</span>
                    <span>交易状态</span>
                    <span>实收款</span>
                </p>
                <!--循环数据外层-->
                <div class="dataListContentWrap">
                    <!-- 循环数据 -->
                    <div class="dataListContent" v-for="(item, index) in dataList">
                        <!--内容头部-->
                        <p class="dataListContentOne">
                            <span>订单号：{{item.one}}</span>
                            <span>创建时间：{{item.two}}</span>
                        </p>
                        <!--下面四块-->
                        <div class="dataListContentALL">
                            <!--第一块-->
                            <div class="dataListContentA">
                                <!--第一块里的小块-->
                                <div class="dataListContentAdiv" v-for="(itemL, indexL) in item.list">
                                    <div class="dataListContentAdivOne">
                                        <img src="" alt="">
                                        <div>
                                            <p>4罐装茶叶红茶2019新茶武夷山正山小种红茶茶新茶武夷山正山小种红茶茶</p>
                                            <p>颜色分类：<span>灰色+棉垫灰色</span></p>
                                        </div>
                                    </div>
                                    <div class="dataListContentAdivTwo">
                                        ¥：168.00
                                    </div>
                                    <div class="dataListContentAdivThree">
                                        1
                                    </div>
                                </div>
                            </div>
                            <!--第二块-->
                            <div class="dataListContentB">
                                <p>{{item.name}}</p>
                            </div>
                            <!--第三块-->
                            <div class="dataListContentC">
                                <p>买家已付款</p>
                                <p>发货</p>
                            </div>
                            <!--第四块-->
                            <div class="dataListContentD">
                                <p>¥：{{item.city}}</p>
                                <p>（含快递：¥{{item.province}}）</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ListDataBottom">
                <!-- 分页器 -->
                <el-pagination
                        id="pagination"
                        style="text-align: right;"
                        background
                        layout="prev, pager, next"
                        :page-size= "10"
                        prev-text="  上一页  "
                        next-text="下一页  "
                        @current-change="handleCurrentChange"
                        :total="25">
                </el-pagination>
            </div>
            <div class="ListDataUpdateTime">
                <p>更新时间：2019-07-25  20:24</p>
            </div>
        </div>

        <!-- 没有数据 -->
        <div class="noDataList" v-if="!isDataList">
            <img class="noDataListA" src="./../../assets/img/shopCenter/SCdealNoDataList.png" alt="">
            <p class="noDataListB">暂无订单</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SCdealB",
        data(){
            return{
                // data数据
                // 是否有数据
                isDataList: false,
                // 数据表格数据
                dataList: [{
                    one:'553948448173715462',
                    two:'2019-07-21 15:21:20',
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: '请问企鹅人问的发全俄文生的2请问的发全俄文生的2',
                    province: '10',
                    city: '12',
                    address: '2019-06-29 09:14',
                    zip: 200333,
                    list:[
                        {name: 'dizhixinix'},
                    ]
                }, {
                    one:'553948448173715462',
                    two:'2019-07-21 15:21:20',
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: '请问企鹅人情味',
                    province: '103',
                    city: '23',
                    address: '2019-06-29 09:14',
                    zip: 200333,
                    list:[
                        {name: 'dizhixinix'},
                    ]
                }, {
                    one:'553948448173715462',
                    two:'2019-07-21 15:21:20',
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: '请问企鹅人情味请问企鹅人请问企鹅人情味',
                    province: '1100',
                    city: '21',
                    address: '2019-06-29 09:14',
                    zip: 200333,
                    list:[
                        {name: 'dizhixinix'},
                        {name: 'dizhixinix'},
                        {name: 'dizhixinix'},
                        {name: 'dizhixinix'},
                        {name: 'dizhixinix'},
                        {name: 'dizhixinix'},
                        {name: 'dizhixinix'},
                    ]
                }, {
                    one:'553948448173715462',
                    two:'2019-07-21 15:21:20',
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: '59.00',
                    province: '410',
                    city: '123',
                    address: '2019-06-29 09:14',
                    zip: 200333,
                    list:[
                        {name: 'dizhixinix'}
                    ]
                },{},{},{},{},{},{}]
            }
        },
        methods:{
            // 分页器更改页数
            handleCurrentChange(val){
                console.log(val);
            },
        },
        mounted(){
            // 中心内容在列表出现高度变高
            $(".SCdealCenter").height("800px");
        }
    }
</script>

<style scoped>

    /* 显示datalist数据 */
    /* 总交易数量 */
    .dataListWrap{
        height: 870px;
        width: 1015px;
        background: #FFFFFF;
        position: relative;
        overflow: hidden;
    }
    .dataList{
        width: 923px;
        margin: 0 auto;
    }
    .ListDataBottom{
        margin-top: 20px;
        margin-right: 40px;
    }
    .ListDataUpdateTime{
        width: 923px;
        margin: 20px auto 0;
        border-top: 1px solid rgba(112,112,112,1);
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(120,120,120,1);
        line-height:65px;
    }



    /* listData内容样式 */
    .dataListTitle{
        width:923px;
        height: 32px;
        margin: 0 auto;
    }
    .dataListTitle span{
        display: inline-block;
        text-align: center;
        line-height: 32px;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        color:#000000;
    }
    .dataListTitle span:nth-child(1){
        width: 340px;
    }
    .dataListTitle span:nth-child(2){
        width: 100px;
    }
    .dataListTitle span:nth-child(3){
        width: 100px;
    }
    .dataListTitle span:nth-child(4){
        width: 110px;
    }
    .dataListTitle span:nth-child(5){
        width: 110px;
    }
    .dataListTitle span:nth-child(6){
        width: 125px;
    }
    .dataListContentWrap{
        max-height: 700px;
        overflow: hidden;
        overflow-y: auto;
    }
    .dataListContent{
        width:923px;
        border:1px solid rgba(126,206,244,1);
        margin: 0 auto 10px;
    }
    .dataListContentOne{
        width:923px;
        height:37px;
        line-height: 37px;
        background:#FEE0DC;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        color:#000000;
    }
    .dataListContentOne span:nth-child(1){
        margin: 0 30px 0 20px;
    }
    .dataListContentALL{
        display: flex;
        display:-webkit-flex;
        align-items:stretch;
    }
    .dataListContentA, .dataListContentB, .dataListContentC, .dataListContentD{
        display: inline-block;
        text-align: center;
    }
    .dataListContentA{
        width: 540px;
        font-size: 0;
        height:inherit;
    }
    .dataListContentA div:nth-last-child(1){
        border-bottom: none;
    }
    .dataListContentAdiv{
        border-bottom: 1px solid #7ECEF4;
    }
    .dataListContentAdivOne{
        display: inline-block;
        width: 340px;
        height: 90px;
        font-size: 14px;
        line-height: 90px;
        text-align: left;
    }
    .dataListContentAdivOne img{
        display: inline-block;
        width: 53px;
        height: 53px;
        background: orange;
        position: relative;
        top: 10px;
        left: 10px;
    }
    .dataListContentAdivOne div{
        display: inline-block;
        width: 230px;
        height: 60px;
        position: relative;
        top: 15px;
        left: 15px;
        overflow: hidden;
    }
    .dataListContentAdivOne div p:nth-child(1){
        height: 32px;
        overflow: hidden;
        overflow-y: auto;
        font-size:12px;
        line-height: 16px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(0,0,0,1);
    }
    .dataListContentAdivOne div p:nth-child(2){
        height: 30px;
        font-size:12px;
        line-height: 30px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(0,0,0,1);
        overflow: hidden;
        overflow-y: auto;
    }
    .dataListContentAdivTwo{
        display: inline-block;
        width: 100px;
        font-size: 14px;
        line-height: 90px;
    }
    .dataListContentAdivThree{
        display: inline-block;
        width: 100px;
        font-size: 14px;
        line-height: 90px;
    }
    .dataListContentB{
        width: 110px;
        height:inherit;
        text-align: center;
        font-size:13px;
        font-family:"PingFang-SC-Regular";
        font-weight:600;
        color:rgba(0,0,0,1);
        border-left: 1px solid #7ECEF4;
        border-right: 1px solid #7ECEF4;
    }
    .dataListContentB p{
        margin-top: 20px;
        max-height: 60px;
        overflow: hidden;
        overflow-y: auto;
    }
    .dataListContentC{
        width: 110px;
        height:inherit;
        border-right: 1px solid #7ECEF4;
    }
    .dataListContentC p:nth-child(1){
        line-height: 40px;
        font-size:13px;
    }
    .dataListContentC p:nth-child(2){
        width: 56px;
        height: 28px;
        line-height: 28px;
        font-size:13px;
        color: #FFFFFF;
        border-radius: 5px;
        background: #7ECEF4;
        margin: 0 auto;
        cursor: pointer;
    }
    .dataListContentD{
        width: 125px;
        height:inherit;
        overflow: hidden;
    }
    .dataListContentD p:nth-child(1){
        margin-top: 20px;
        font-size:13px;
    }
    .dataListContentD p:nth-child(2){
        font-size:13px;
    }


    /* 无数据框 */
    .noDataList{
        width:1016px;
        height:809px;
        background:rgba(255,255,255,1);
        text-align: center;
    }
    .noDataListA{
        width: 300px;
        height: 232px;
        margin: 90px auto 0;
    }
    .noDataListB{
        font-size:16px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height:50px;
        text-shadow:0px 7px 98px rgba(145,34,0,0.4);
    }


</style>
